<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>图书信息管理子系统</title>
	<link th:href="@{/js/layui/css/layui.css}" rel="stylesheet">
	<script th:src="@{/js/jquery.min.js}"></script>
	<script th:src="@{/js/jquery-form.js}"></script>
	<script th:src="@{/js/layui/layui.js}"></script>
	<style>
		.layui-form-label i {
			color: red;
			line-height: 20px;
			margin-right: 5px;
		}
	</style>
</head>
<body class="layui-view-body">
	<div class="layui-row">
    	<div class="layui-card">
        	<form class="layui-form layui-card-body layui-form-pane" method="post" th:action="@{/book/save}">
				<input type="hidden" name="id" th:value="${book?.id}" />
				<div class="layui-form-item">
					<label class="layui-form-label"><i>*</i>图书名称</label>
					<div class="layui-input-block">
						<input type="text" name="bookName" th:value="${book?.bookName}" lay-verify="bookName" placeholder="请输入图书名称" maxlength="8" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><i>*</i>作者</label>
					<div class="layui-input-block">
						<input type="text" name="author" th:value="${book?.author}" lay-verify="required" maxlength="15" placeholder="请输入作者" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">价格</label>
					<div class="layui-input-block">
						<input type="text" name="price" th:value="${book?.price}" maxlength="15" placeholder="请输入价格" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">数量</label>
					<div class="layui-input-block">
						<input type="text" name="number" th:value="${book?.number}" maxlength="15" placeholder="请输入数量" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">图片</label>
					<div class="layui-input-inline uploadHeadImage">
						<div class="layui-upload-drag" id="bookImg">
							<i class="layui-icon">v</i>
							<p>点击上传图片，或将图片拖拽到此处</p>
						</div>
					</div>
					<div class="layui-input-inline">
						<div class="layui-upload-list">
							<img class="layui-upload-img" style="margin-top: -15px" width="150" th:src="${book?.imgUrl}" height="150" id="img">
							<p id="bookImgText"></p>
						</div>
						<input type="hidden" name="img" th:value="${book?.img}" />
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">备注</label>
					<div class="layui-input-block">
						<input type="text" name="remark" th:value="${book?.remark}" maxlength="15" placeholder="请输入备注" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
	                <button type="submit" class="layui-btn" lay-submit lay-filter="*">提交</button>
	                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              	</div>
			</form>
		</div>
	</div>
</body>
<script>
layui.use(['form', 'upload'], function(){
	var form = layui.form;
	var upload = layui.upload;

	// 提交表单
	form.on('submit(*)', function(data){
		$(".layui-form").ajaxForm({
			error: function(data){
				errorHandle(data);
			},
			success: function(data) {
				parent.location.reload();
				var index = parent.layer.getFrameIndex(window.name);
				parent.layer.close(index);
			}
		});
	});

	//拖拽上传
	var uploadInst = upload.render({
		elem: '#bookImg'
		, url: '[[@{/book/uploadImg}]]'
		, size: 500
		, before: function (obj) {
			obj.preview(function (index, file, result) {
				$('#img').attr('src', result); //图片链接（base64）
			});
		}
		, done: function (res) {
			if (res.code != 200) {
				return layer.msg('上传失败');
			}
			//上传成功
			$("input[name='img']").val(res.data.img);
			var bookImgText = $('#bookImgText');
			bookImgText.html('<span style="color: #8f8f8f;">上传成功</span>');
		}
		, error: function () {
			var bookImgText = $('#bookImgText');
			bookImgText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini book-img-reload">重试</a>');
			bookImgText.find('.book-img-reload').on('click', function () {
				uploadInst.upload();
			});
		}
	});
});

// 错误处理
function errorHandle(data) {
	if (data.status == 404) {
		layer.msg("请求资源不存在", {icon: 2});
	} else {
		layer.msg("服务端异常", {icon: 2});
	}
	return false;
}
</script>
</html>